<template>
  <div class="products">

    <div v-for="(item, index) in product" :key="index" class="box">
      <van-cell class="shopurl" :title="item.shopinfo.shop_name" :icon="`${resourceURL}${item.shopinfo.imagesurl}`" :border="false" is-link center @click="shopDetail(item.shop_id)" />
      <van-card class="product" v-for="(items, indexs) in item.detailinfo" :key="indexs" :num="items.quantity" :desc="items.p_s_name" :title="items.product_name" :thumb="`${resourceURL}${items.cover_url}`">
        <template #price>
          <div>￥{{items.mprice}}</div>
        </template>

      </van-card>

    </div>
    <div class="box info">
      <div class="item">
        <p>物流状态:</p>
        <div style="color:#FB2B2C">{{expressDetail[0].status}}</div>
      </div>
      <div class="item">
        <p>承运公司：</p>
        <div>{{express.express_name}}</div>

      </div>
      <div class="item">
        <p>快递单号：</p>
        <div>{{express.nu}}</div>
      </div>
    </div>
    <div class="box detail">
      <h4>物流跟踪</h4>
      <van-steps direction="vertical" :active="0" active-color="#FB2B2C">
        <van-step v-for="(item,index) in expressDetail" :key="index">
          <h3>{{item.context}}</h3>
          <p>{{item.ftime}}</p>
        </van-step>

      </van-steps>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {
      product: '',
      order: '',
      expressDetail: '',
      express: ""
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {

  },
  created () {
    this.getOrderDetail()
    this.getExpress()
  },
  methods: {
    // 店铺详情
    shopDetail (id) {
      this.$router.push({ name: "store", query: { id } });
    },
    // 订单详情
    getOrderDetail () {
      this.$axios
        .get(this.$api.getorderdetail, {
          params: {
            order_id: this.$route.query.id,
          },
        })
        .then((res) => {
          this.order = res.data.data.order;
          this.product = res.data.data.productinfo;

        });
    },
    getExpress () {
      this.$axios
        .get(this.$api.express, {
          params: {
            order_id: this.$route.query.id,
          },
        })
        .then((res) => {
          this.express = res.data.data
          this.expressDetail = res.data.data.data

        });
    },
  }
};
</script>
<style lang='less' scoped>
.products {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.box {
  margin: 12px 16px;
  margin-bottom: 0px;
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  border: 1px solid #f2f2f2;
  background-color: #fff;
}
.info {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px 16px;
  height: 105px;
  font-size: 14px;

  color: #201d1d;
  .item {
    display: flex;
    p {
      margin: 0;
      margin-right: 6px;
    }
  }
}
.detail {
  flex: 1;
  padding: 12px 16px;
  h4 {
    font-size: 14px;

    color: #201d1d;
  }
}
.shopurl {
  .van-cell__left-icon {
    display: flex;
    align-items: center;
    width: 20px;
    height: 22px;
    margin-right: 8px;
  }
}
.product {
  margin-top: 0;
  background-color: #fff;
  /deep/.van-card__title {
    font-size: 14px;
  }
  /deep/ .van-card__price {
    font-size: 14px;
  }
}
.one_option_btn {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 6px;
  /deep/.van-button {
    width: 80px;
    margin-left: 10px;
  }
}
.option_btn {
  display: flex;
  justify-content: flex-end;
  padding: 6px 16px 12px;
  /deep/.van-button {
    width: 80px;
    margin-left: 10px;
  }
}
</style>